import React ,{useState,useEffect}from 'react'
import { CapsuleTabs } from 'antd-mobile'
import axios from 'axios';
import style from './index.module.scss'
import { NavBar, Space, Toast } from 'antd-mobile'
import {useNavigate} from 'react-router-dom'
const Index:React.FC = () => {
const navigator = useNavigate()
    const  [tablist, setTablist] = useState([])
const  [tablist2, setTablist2] = useState([])
const  [tablist3, setTablist3] = useState([])
const  [tablist4, setTablist4] = useState([])
const  [tablist5, setTablist5] = useState([])
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(100);
 
  const getTablist = async () => {
    const res = await axios.get('/api/date',{params:{
      currentPage,
      pageSize
    }})
    const { data} =res.data
    setTablist(data.splice(0,10))
    setTablist2(data.splice(11,15))
    setTablist3(data.splice(16,20))
    setTablist4(data.splice(30,35))
    setTablist5(data.splice(36,50))
  }
  useEffect(() => {
    getTablist()
  
  }, [])
  return (
    <div>
         <NavBar style={{background:'blue',color:'#fff'}} onBack={()=>navigator(-1)}>直播义诊大厅</NavBar>
      <div className={style.zbyy}>
       
        <div>
          <CapsuleTabs defaultActiveKey='1'>
           
          <CapsuleTabs.Tab title='昨天' key='1'>
            <div className={style.zbyybox1}>
              {
              tablist.length>0&&tablist.map((item:any,index:number)=>{
                
                return <div key={index} className={style.zbyybox2} onClick={()=> navigator(`/zbyzdetatils/${item.id}`)}>
                 
                <div className={style.zbyybox3}>
                  <div> <img src={item.image} alt="" /></div>
                  <div>
                    <p> {item.keshi}</p>
                 <p> {item.name}</p>
                   {item.type}
                  </div>
                </div>
                  
                    <p>  {item.hospital}</p>
                    {item.shanc}
                  
                </div>
              })
            }
            </div>
          </CapsuleTabs.Tab>
          <CapsuleTabs.Tab title='今日' key='2'>
           <div className={style.zbyybox1}>
              {
              tablist2.length>0&&tablist2.map((item:any,index:number)=>{
                
                return <div key={index} className={style.zbyybox2} onClick={()=> navigator(`/zbyzdetatils/${item.id}`)}>
                 
                <div className={style.zbyybox3}>
                  <div> <img src={item.image} alt="" /></div>
                  <div>
                    <p> {item.keshi}</p>
                 <p> {item.name}</p>
                   {item.type}
                  </div>
                </div>
                  
                    <p>  {item.hospital}</p>
                    {item.shanc}
                  
                </div>
              })
            }
            </div>
          </CapsuleTabs.Tab>
          <CapsuleTabs.Tab title='17号' key='3'>
           <div className={style.zbyybox1}>
              {
              tablist3.length>0&&tablist3.map((item:any,index:number)=>{
                
                return <div key={index} className={style.zbyybox2} onClick={()=> navigator(`/zbyzdetatils/${item.id}`)}>
                 
                <div className={style.zbyybox3}>
                  <div> <img src={item.image} alt="" /></div>
                  <div>
                    <p> {item.keshi}</p>
                 <p> {item.name}</p>
                   {item.type}
                  </div>
                </div>
                  
                    <p>  {item.hospital}</p>
                    {item.shanc}
                  
                </div>
              })
            }
            </div>
          </CapsuleTabs.Tab>
          <CapsuleTabs.Tab title='18号' key='4'>
           <div className={style.zbyybox1}>
              {
              tablist4.length>0&&tablist4.map((item:any,index:number)=>{
                
                return <div key={index} className={style.zbyybox2} onClick={()=> navigator(`/zbyzdetatils/${item.id}`)}>
                 
                <div className={style.zbyybox3}>
                  <div> <img src={item.image} alt="" /></div>
                  <div>
                    <p> {item.keshi}</p>
                 <p> {item.name}</p>
                   {item.type}
                  </div>
                </div>
                  
                    <p>  {item.hospital}</p>
                    {item.shanc}
                  
                </div>
              })
            }
            </div>
          </CapsuleTabs.Tab>
          <CapsuleTabs.Tab title='19号' key='5'>
            <div className={style.zbyybox1}>
              {
              tablist2.length>0&&tablist2.map((item:any,index:number)=>{
                
                return <div key={index} className={style.zbyybox2} onClick={()=> navigator(`/zbyzdetatils/${item.id}`)}>
                 
                <div className={style.zbyybox3}>
                  <div> <img src={item.image} alt="" /></div>
                  <div>
                    <p> {item.keshi}</p>
                 <p> {item.name}</p>
                   {item.type}
                  </div>
                </div>
                  
                    <p>  {item.hospital}</p>
                    {item.shanc}
                  
                </div>
              })
            }
            </div>
          </CapsuleTabs.Tab>
          <CapsuleTabs.Tab title='20号' key='6'>
            <div className={style.zbyybox1}>
              {
              tablist.length>0&&tablist.map((item:any,index:number)=>{
                
                return <div key={index} className={style.zbyybox2} onClick={()=> navigator(`/zbyzdetatils/${item.id}`)}>
                 
                <div className={style.zbyybox3}>
                  <div> <img src={item.image} alt="" /></div>
                  <div>
                    <p> {item.keshi}</p>
                 <p> {item.name}</p>
                   {item.type}
                  </div>
                </div>
                  
                    <p>  {item.hospital}</p>
                    {item.shanc}
                  
                </div>
              })
            }
            </div>
          </CapsuleTabs.Tab>
         
        </CapsuleTabs>
        </div>
      </div>
    </div>
  )
}

export default Index
